<template>
	<view id="app">
		<scroll-view enable-flex scroll-y="true" class="scrollView">
			<view class="cards" v-for="(item,index) in datas" :key="index">
				<view class="titles">
					<view class="deviceName">
						名称:{{ item.name }}
					</view>
					<view class="state">
						状态:{{ item.state.text }}
					</view>
				</view>
				<view class="contents">
					<view class="data">
						<view class="productName">
							产品名称:{{ item.productName }}
						</view>
						<view class="deviceID">
							设备ID:{{ item.id }}
						</view>
						<view class="registryTime">
							注册时间:{{ item.registryTime }}
						</view>
					</view>
					<view class="viewMore">
						<up-button text="查看更多" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" @click="toDetails(item.id)"></up-button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue'
	import moment from 'moment';
	import {
		getDeviceListData
	} from "../../api/listpage.js"
	onMounted(() => {
	  getDeviceList()
	})
	let token = ref(uni.getStorageSync('token'))
	let datas = ref([])
	async function getDeviceList(){
		let parameter = 10
		let res = await getDeviceListData(token.value,parameter)
		if (res.data.status == 200) {
			res.data.result.data.map((item)=>{
				item.registryTime = moment(item.registryTime).format('YYYY/MM/DD HH:mm:ss')
			})
			datas.value = res.data.result.data
		}
	}
	function toDetails(id){
		uni.navigateTo({
			url: `/pages/details/details?id=${id}`
		});
	}
</script>

<style lang="scss" scoped>
#app{
	width: 100vw;
	height: 100vh;
	.scrollView{
			  width: 100vw;
			  height: 100vh;
			  overflow: hidden;
			  background-color: #DDDDDD;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  flex-wrap: wrap;
			  .cards{
				  border-radius: 20rpx;
				  display: flex;
				  flex-direction: column;
				  width: 90vw;
				  color: #fff;
				  height: 280rpx;
				  margin-top: 50rpx;
				  overflow: hidden;
				  .titles{
					  display: flex;
					  font-size: 28rpx;
					  width: 100%;
					  height: 25%;
					  background-color: #99CCCC;
					  .deviceName{
						  width: 70%;
						  height: 100%;
						  display: flex;
						  align-items: center;
						  margin-left: 30rpx;
					  }
					  .state{
						  width: 30%;
						  height: 100%;
						  display: flex;
						  align-items: center;
						  margin-right: 30rpx;
					  }
				  }
				  .contents{
					  display: flex;
					  justify-content: space-around;
					  width: 100%;
					  height: 72%;
					  background-color: #3399CC;
					  .data{
						  display: flex;
						  flex-direction: column;
						  justify-content: space-around;
						  align-items: center;
						  width: 70%;
						  height: 100%;
						  .productName{
							  display: flex;
							  justify-content: center;
							  align-items: center;
							  font-size: 26rpx;
							  width: 95%;
							  height: 30%;
							  background-color: #FFCC00;
							  border-radius: 50%;
						  }
						  .deviceID{
							  display: flex;
							  justify-content: center;
							  align-items: center;
							  font-size: 26rpx;
							  width: 95%;
							  height: 30%;
							  background-color: seagreen;
							  border-radius: 50%;
						  }
						  .registryTime{
							  display: flex;
							  justify-content: center;
							  align-items: center;
							  font-size: 26rpx;
							  width: 95%;
							  height: 30%;
							  background-color: #BBBBBB;
							  border-radius: 50%;
						  }
					  }
					  .viewMore{
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 width: 26%;
						 height: 100%;
					  }
				  }
			  }
	}
}
</style>
